<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: "创作",
  },
}
</route>
<template>
  <view class="view-zitu overflow-hidden">
    <!-- 上传图片 -->
    <view class="p-2">
      <view class="tag">
        上传图片:
        <text class="text-gray">(包含正脸的照片)</text>
      </view>
      <view class="w-full h-[200rpx] my-2 upload-view overflow-hidden">
        <image @click="uploadImage" :src="pageData.image_url" mode="widthFix" />
      </view>
    </view>
    <view class="w-[92%] h-[1px] bg-gray-300 ml-[4%]" style="margin-bottom: 10px"></view>
    <!-- 输入框 -->
    <view class="px-2">
      <view class="tag">输入文案:</view>
      <textarea
        class="w-full text-sm p-2"
        v-model="pageData.prompt"
        placeholder="示例：“拿着咖啡，微笑，坐在沙发上”"
        :maxlength="300"
        :style="pageData.again_role_id ? 'width: 80% !important;' : ''"
      />
      <image
        v-if="pageData.again_role_id"
        :src="pageData.role_url"
        mode="widthFix"
        class="tip-img rounded-1"
      />
    </view>
    <view class="w-[92%] h-[1px] bg-gray-300 ml-[4%]" style="margin-bottom: 10px"></view>
    <!-- 文案 -->
    <view class="p-2" v-if="sentencesList.length">
      <view class="tag">选定句子:</view>
      <view class="sentence-list">
        <view
          class="color-coolgray mb-1 sentence mt-1"
          v-for="(item, index) in sentencesList"
          :key="index"
          @click="choosePrompt(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <!-- 角色 -->
    <view class="row">
      <view class="tag">选定配音:</view>
      <view class="role-list">
        <view
          v-for="(item, index) in pageData.roleList"
          :key="index"
          @click="onRoleChange(item)"
          :class="{ selected: item.id === pageData.role_id }"
        >
          <view class="role-item flex items-center mb-3">
            <text>{{ item.name }}</text>
            <image
              class="w-[35rpx] h-[35rpx] ml-2"
              src="https://qncdn.mopic.mozigu.net/work/143/24/e78715f63f034549/play.png"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="btn-view">
      <button
        class="w-[50%] bg-[#69C46A] outline-none !border-none text-white fw-bold rounded-2 after:border-none"
        @click="onBegin"
      >
        生成视频
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { createVideo, getRoleList } from "@/service/index"
import { useUserStore } from "@/store"
import Muni from "@/muni"

const userStore = useUserStore()

interface RoleItem {
  id: number
  name: string
  preview_audio_url: string
  options: object
}

interface PageDataType {
  roleList: RoleItem[]
  prompt: string
  role_url: string
  image_url: string
  currentItem: object
  role_id: number | null
  again_role_id: number | null
}

const pageData = reactive<PageDataType>({
  roleList: [
    {
      id: 1,
      name: "火山:奶气萌娃",
      preview_audio_url:
        "https://qncdn.mopic.mozigu.net/work/143/24/a6e816d478cb4176/Portal_Demo_BV051.mp3",
      options: {
        engine: "volcengine",
        voice_type: "BV051_streaming",
        voice: "other",
        speed_ratio: 1,
        volume_ratio: 1,
        silence_duration: 300,
        emotion: "radio",
      },
    },

    {
      id: 2,
      name: "火山:通用女声",
      preview_audio_url:
        "https://qncdn.mopic.mozigu.net/work/143/24/a6e816d478cb4176/Portal_Demo_BV001.mp3",
      options: {
        engine: "volcengine",
        voice_type: "BV001_streaming",
        voice: "other",
        speed_ratio: 1,
        volume_ratio: 1,
        silence_duration: 300,
        emotion: "radio",
      },
    },
    {
      id: 3,
      name: "火山:灿灿",
      preview_audio_url:
        "https://qncdn.mopic.mozigu.net/work/143/24/a6e816d478cb4176/ad5c375d-4540-4764-baf5-e595364f8717.mp3",
      options: {
        engine: "volcengine",
        voice_type: "BV700_streaming",
        voice: "other",
        speed_ratio: 1,
        volume_ratio: 1,
        silence_duration: 300,
        emotion: "radio",
      },
    },
  ],
  prompt: "",
  role_url: "",
  role_id: 1,
  again_role_id: null,
  currentItem: {},
  image_url: "https://qncdn.mopic.mozigu.net/work/143/24/a17cf8079a704504/upload.png",
})

const sentencesList = [
  //   '如果我能看得见,就能轻易的分辨白天黑夜,就能准确的在人群中,牵住你的手',
  //   '以前就是脾气太好，现在发现一旦没有了素质，世界都开阔了！',
  //   '在晨光的照耀下，唤醒沉睡的心灵，用一颗明净的心去感受世界的每一份美好。清醒地活在当下，让每一刻都充满智慧和力量。',
  //   '生活的画卷需要我们用清醒的笔触去描绘，每一步都需精心构思，每一景都需细心观察。清醒地前行，绘制出属于自己的精彩篇章。',
  //   '清醒，是穿越生活迷雾的灯塔，它指引我们在复杂多变的环境中找到正确的航向。让清醒成为习惯，让每一步都坚实而有力。',
  //   '在纷扰的世界中，保持一颗清醒的心，就像拥有一把锐利的剑，能够斩断迷茫和困惑。清醒地生活，让决策更加精准，让人生更加精彩。',
  //   '清醒不仅是对外界事物的清晰认知，更是对内心深处的深刻洞察。在清醒的状态下，我们能够更好地理解自己，更有效地塑造未来。',
]

onLoad((options) => {
  if (options.url || options.id) {
    pageData.role_url = options.url
    pageData.again_role_id = Number(options.id) || null
  }

  //   uni.showLoading({
  //     title: "加载中...",
  //     mask: true,
  //   })
  //   getRoleListData()
})

// 选择角色
function onRoleChange(role) {
  pageData.role_id = role.id

  pageData.currentItem = role.options
}
// 开始创作
function onBegin() {
  if (!pageData.image_url) {
    uni.showToast({
      title: "请上传图片",
      icon: "none",
    })
    return
  }
  if (!pageData.prompt) {
    uni.showToast({
      title: "请输入内容",
      icon: "none",
    })
    return
  }
  if (!pageData.role_id) {
    uni.showToast({
      title: "请选择角色",
      icon: "none",
    })
    return
  }
  uni.showLoading({
    title: "创建中...",
    mask: true,
  })

  createVideo({
    appid: userStore.userInfo.appid || "test_appid",
    imageUrl: pageData.image_url,
    caption: pageData.prompt,
    voiceOptions: pageData.currentItem,
  })
    .then((res) => {
      console.log(res.data)
      uni.showModal({
        title: "提示",
        content: "创建成功，请稍后到我的任务列表查看",
        showCancel: false,
      })
    })
    .finally(() => {
      uni.hideLoading()
    })
}

// 选择文案
function choosePrompt(item) {
  pageData.prompt = item
}

// 获取角色列表
// function getRoleListData() {
//   getRoleList()
//     .then((res: any) => {
//       pageData.roleList = res.data.map(({ id, name, description }) => ({
//         id,
//         name,
//         description,
//       }))
//       pageData.role_id = Number(pageData.again_role_id) || res.data[0].id
//     })
//     .finally(() => {
//       uni.hideLoading()
//     })
// }

function uploadImage() {
  uni.chooseImage({
    count: 1,
    sourceType: ["album"],
    sizeType: ["original"],
    success: (res) => {
      uni.showLoading({
        title: "上传中...",
        mask: true,
      })
      Muni.file
        .uploadFile(res.tempFilePaths[0])
        .then((res) => {
          if (res && res.url) {
            pageData.image_url = res.url
          }
        })
        .catch((err) => {
          console.log("err --->", err)
          uni.showToast({
            title: "上传失败",
            icon: "none",
            mask: true,
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    },
  })
}
</script>

<style scoped lang="scss">
.view-zitu {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 5px 0 0 0;
  box-sizing: border-box;
  width: 100%;

  .btn-view {
    width: 100%;
    height: 80px;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    display: flex;
    bottom: 00px;
    align-items: center;
    justify-content: center;
  }
  .row {
    display: flex;
    flex-direction: column;
    padding: 0 10px 100px;

    .tag {
      margin-top: 6px;
    }
    &:last-child {
      border-bottom: none;
    }
  }
  .list {
    flex: 1;
  }
}
$labelHeight: 42rpx;

.role-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 10px;

  &::-webkit-scrollbar {
    display: none;
  }
  .selected {
    .role-item {
      color: #000000;
      font-weight: 600;
      border: 1px solid #399fff;
    }
  }
}

.role-item {
  border: 1px solid gray;
  border-radius: 8rpx;
  padding: 6rpx 10rpx;
  margin-right: 14rpx;
  font-size: 14px;
}
.role-item:last-of-type {
  margin: 0;
}

.sentence-list {
  max-height: 180px;
  overflow-y: auto;
}
.sentence {
  border-bottom: 1px solid #eee;
  padding-bottom: 3px;
  font-size: 14px;
  line-height: 20px;
}

.tip-img {
  position: absolute;
  z-index: 10;
  right: 6px;
  top: 5px;
  width: 60px;
}

.upload-view {
  image {
    width: 150rpx;
  }
}
</style>
